<template>
	<view>
		<view class="yongjinBox">
			<view class="yongjin">佣金：￥<text style="font-size:22px">{{ dashboard.rights.commission }}</text></view>
			<view class="tixian"></view>
		</view>
		<view class="bgBox">
			<view class="bglist">
				<text>金额面值(元)</text><input class="input" placeholder="请输入金额面值" required v-model="jinE" />
			</view>
			<view class="bglist">
				<text>账号类型</text>
				<view class="uni-list-cell-db" style="padding:0 10px">
					<picker mode="selector" :range="options" @change="onPickerChange" :value="selectedValue">
						<view>{{selectedLabel}}</view>
					</picker>
				</view>
			</view>
			<view class="bglist" v-if="zhanghaotype===1">
				<text>账号</text><input class="input" placeholder="请输入支付宝账号" required v-model="zhanghao" />
			</view>
			<view class="bglist" v-if="zhanghaotype===1">
				<text>用户名</text><input class="input" placeholder="请输入支付宝用户名" required v-model="username" />
			</view>
			<view class="bglist" style="border:none" v-if="zhanghaotype===2">
				<text>微信收款码</text>
			</view>
			<view style="padding:10px 30px;" v-if="zhanghaotype===2">
				<uni-file-picker disable-preview :del-icon="true" return-type="object"  @select="uploadShoukuan">点击上传</uni-file-picker>
			</view>
		</view>
		<view style="width:92%;padding-top:15px;margin:0 auto;">
			<button class="btn" @tap="commissionPost">提交</button>
		</view>
	</view>
</template>

<script setup lang="ts">
	import { getDashboardApi,withdrawApi } from '@/api/member'
	import { computed, ref } from 'vue'
	import { onLoad, onPullDownRefresh, onShow } from '@dcloudio/uni-app'
	import { useAddressStore, useMemberStore, useSettingStore } from '@/stores'
	import { reactive } from 'vue'
	import { uploadApi } from '@/api/common'
	const memberStore = useMemberStore()
	const addressStore = useAddressStore()
	const settingStore = useSettingStore()
	
	const dashboard = reactive({
		rights: {
			commission: '0'
		},
	})
	const getData = () => {
		return new Promise(() => {
			if (memberStore.profile?.token) {
				getDashboardApi().then((res) => {
					Object.assign(dashboard, res.result)
					uni.hideLoading()
					console.log('00000000000', res.result)
				})
			}
		})
	}

	//账号类型
	const options = ref(['支付宝', '微信'])
	const zhanghaotype = ref(1)
	const selectedValue = ref(0) //初始值设为0，默认选中第一个
	const selectedLabel = ref(options.value[selectedValue.value])
	//定义选择器改变时触发的方法
	const onPickerChange = (e : any) => {
		selectedValue.value = e.detail.value; //更新选中值
		selectedLabel.value = options.value[selectedValue.value]; //更新选中标签
		if (selectedValue.value == 0) {
			console.log('666666', selectedValue.value)
			zhanghaotype.value = 1
		} else if (selectedValue.value == 1) {
			zhanghaotype.value = 2
		}
	}

	//上传收款二维码
	const uploadShoukuan = (res : any) => {
		const shoukuanUrl = res.tempFilePaths[0]
		if (!shoukuanUrl) {
			uni.showToast({
				icon: 'error',
				title: '请上传收款码',
			})
		}
		uploadApi(shoukuanUrl).then((res) => {
			console.log('shoukuan',res)
			if(res.code === 200){
				zhanghao.value = res.result.url
			}
			setTimeout(() => {
				uni.showToast({
					icon: 'success',
					title: '二维码上传成功',
				})
			}, 1000)
		})
	}
	//提现前数据
	const jinE = ref('')
	const zhanghao = ref('')
	const username = ref('')
	const commissionPost = ()=>{
		let money = parseFloat(jinE.value)
		parseFloat(dashboard.rights.commission)
		console.log('money',money)
		console.log('commission',parseFloat(dashboard.rights.commission))
		if(!money){
			return uni.showToast({
				title:'请输入金额面值',
				icon:'none'
			})
		}
		if(money <= 0){
			return uni.showToast({
				title:'请正确输入金额面值',
				icon:'none'
			})
		}
		if(money > parseFloat(dashboard.rights.commission)){
			return uni.showToast({
				title:'输入金额过大',
				icon:'none'
			})
		}
		if(!zhanghao.value){
			return uni.showToast({
				title:'请输入账号或上传收款码',
				icon:'none'
			})
		}
		withdrawApi(money,zhanghao.value,username.value,zhanghaotype.value).then((res)=>{
			 if(res.code == 200){
				 uni.showToast({
				 	title:'提现信息已提交',
				 	icon:'none'
				 })
			 }
		})
	}

	onLoad(() => {
		getData()
	})
</script>

<style lang="scss">
	page {
		background-color: #f6f6f6;
	}

	.bgBox {
		width: 96%;
		height: 300px;
		background-color: #ffffff;
		border-radius: 15px;
		margin: 20px auto;
	}

	.bglist {
		width: 95%;
		padding: 0 20px;
		border-bottom: 1rpx solid #ccc;
		height: 50px;
		align-items: center;
		margin: 0 auto;
		display: flex;
		justify-content: space-between;

		.input {
			height: 46rpx;
			width: 150px;
			text-align: right;
		}
	}

	.yongjinBox {
		width: 96%;
		height: 100px;
		background-color: #ffffff;
		border-radius: 15px;
		margin: 20px auto;
		display: flex;
		justify-content: space-between;

		.yongjin {
			height: 40px;
			line-height: 40px;
			width: 65%;
			margin: 30px 20px;
			font-size: 18px;
			color: #333333;
		}

		.tixian {
			height: 40px;
			width: 20%;
			margin: 30px 20px;
			color: #ffffff;
			font-weight: bold;
			text-align: center;
			line-height: 40px;
		}
	}

	.btn {
		background-color: #f00;
		margin: 10px auto;
		width: 100%;
		color: #ffffff;
		font-size: 14px;
		height: 30px;
		line-height: 30px;
		border-radius: 20px;
	}
</style>